<template>
  <div class="home-list">
    <div class="list-item" v-for="data in datas" @click="homeListClick(data.sku)">
      <div>
        <img :src="data.img" alt="" @load="imgFinishLoad">
      </div>
      <div>
        <div class="title">
          {{data.title}}
        </div>
        <div class="price">
          <span><span class="money">¥</span> {{data.price}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  import {debounce} from "../../../common/Utils";

  import {ImgFinishLoadMixin} from "../../../common/mixin";

  export default {
    name: "HomeList",
    props:{
      datas:{
        type:Array,
        default(){
          return []
        }
      }
    },
    mixins:[ImgFinishLoadMixin],
    data:function(){

      return {

        // callFun: null
      }
    },
    methods:{

      homeListClick(sku){

        this.$router.push("/homedetail/" + sku)
      }
    }
  }
</script>

<style scoped>

  .home-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    font-size: 14px;
    background-color: #f0f2f5;
  }

  .list-item{
    width: 48%;
    margin-top: 5px;
    background-color: #fff;
  }

  .list-item .title{
    text-overflow: ellipsis;
    overflow: hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    color: #000;
  }

  .list-item .price{

    color: #f00;
    margin: 5px 2px;

  }

  .list-item .price .money{

    font-size: 12px;
  }

  .list-item img{
    width: 100%;
  }


</style>
